<script setup>
	import { ref, watch } from 'vue'
	const props = defineProps({
		titles: {
			type: Array,
			default: () => ['1', '2', '3', '4', '5'],
		},
		tabControllIndex: {
			type: Number,
			default: 0,
		},
	})
	const emit = defineEmits(['tabItemClick'])

	const currentIndex = ref(0)

	const itemClick = (index) => {
		currentIndex.value = index
		emit('tabItemClick', index)
		// console.log(index)
	}

	watch(
		() => props.tabControllIndex,
		(newValue) => {
			currentIndex.value = newValue
		}
	)
</script>

<template>
	<div class="detail-tab2">
		<template
			v-for="(item, index) in titles"
			:key="index">
			<div
				class="item"
				:class="{ active: index === currentIndex }"
				@click="itemClick(index)">
				<span>标签{{ item }}</span>
			</div>
		</template>
	</div>
</template>

<style lang="scss" scoped>
	.detail-tab2 {
		display: flex;
		align-items: center;
		height: 44px;
		background-color: #fff;
		.item {
			flex: 1;
			height: 44px;
			line-height: 44px;
			text-align: center;
			&.active {
				background-color: #fff;
				// box-sizing: border-box;
				font-weight: 700;
				span {
					border-bottom: 3px solid var(--main-color);
					padding: 12px 8px;
				}
			}
		}
	}
</style>
